<template>
  <div style="background: #f0f2f5; padding: 24px">
    <!-- 头部 -->
    <a-card :bordered="false" style="margin-bottom: 25px">
      <div class="toSearch">
        <!-- 部门搜索 -->
        <div style="width: 70%; display: flex">
          <!-- 日期选择 -->
          <a-date-picker
            @change="changeDate"
            style="min-width: 220px; margin-right: 15px"
          />
          <a-tree-select
            v-model="department"
            show-search
            searchPlaceholder="请输入准确的部门名称"
            :allowClear="true"
            tree-data-simple-mode
            style="width: 220px; margin-right: 15px"
            :dropdown-style="{
              maxHeight: '400px',
              width: '300px',
              overflow: 'auto',
            }"
            :tree-data="treeData"
            :load-data="onLoadData"
            :dropdownMatchSelectWidth="false"
          />
          <!-- 默认展示层级 -->
          <a-select
            style="width: 200px; margin-right: 15px"
            v-model="showLevel"
          >
            <a-select-option value="2">二级 </a-select-option>
            <a-select-option value="3">三级 </a-select-option>
            <a-select-option value="4">四级 </a-select-option>
            <a-select-option value="5">五级 </a-select-option>
          </a-select>
          <a-select
            mode="tags"
            placeholder="请输入卡片展示的信息"
            :default-value="['numPer', 'mainPer']"
            style="min-width: 240px"
            @change="handleChange"
          >
            <a-select-option
              v-for="(item, index) in cardInfo"
              :key="index"
              :value="item.key"
            >
              {{ item.value }}
            </a-select-option>
          </a-select>
        </div>
        <!-- right组织架构调整 -->
        <div>
          <a-button type="primary" @click="toStruAdjust">组织架构调整</a-button>
        </div>
      </div>
    </a-card>
    <div style="height: 500px; width: 80%; margin: 0 auto">
      <vue-okr-tree
        :data="testData"
        show-collapsable
        show-node-num
        default-expand-all
        node-key="id"
        :render-content="renderContent"
        @node-expand="handleNodeExpand($event)"
      />
    </div>
    <div>
      <toolbox></toolbox>
    </div>
  </div>
</template>

<script>
import { VueOkrTree } from "vue-okr-tree"
import "vue-okr-tree/dist/vue-okr-tree.css"
import toolbox from "./toolbox"
export default {
  name: 'struView',
  components: {
    VueOkrTree,
    toolbox,
  },
  data () {
    return {
      department: '部门',
      treeData: [
        { id: 1, pId: 0, value: '1', title: 'Expand to load' },
        { id: 2, pId: 0, value: '2', title: 'Expand to load' },
        { id: 3, pId: 0, value: '3', title: 'Tree Node', isLeaf: true },
      ],
      showLevel: '2',
      cardInfo: [
        {
          key: 'numPer',
          value: '人数'
        },
        {
          key: 'mainPer',
          value: '负责人'
        },
        {
          key: 'photo',
          value: '头像'
        }
      ],
      testData: [{
        id: '0',
        label: 'xxx科技有限公司',
        mainPer: '张三',
        numPer: 1000,
        children: [{
          id: '1 - 1',
          label: '产品研发部',
          mainPer: '赵',
          numPer: 500,
          children: [{
            id: '1 - 1 - 1',
            label: '研发-前端',
            mainPer: '钱'
          }, {
            id: '1 - 1 - 2',
            label: '研发-后端',
            mainPer: '孙'
          }, {
            id: '1 - 1 - 3',
            label: 'UI 设计',
            mainPer: '李',
          },
          {
            id: '1 - 1 - 4',
            label: 'UI 设计',
            mainPer: '李',
          },
          {
            id: '1 - 1 - 5',
            label: 'UI 设计',
            mainPer: '李',
          },
          {
            id: '1 - 1 - 6',
            label: 'UI 设计',
            mainPer: '李',
          },
          {
            id: '1 - 1 - 7',
            label: 'UI 设计',
            mainPer: '李',
          },
          {
            id: '1 - 1 - 8',
            label: 'UI 设计',
            mainPer: '李',
          },
          ]
        }, {
          id: '1 - 2',
          label: '销售部',
          mainPer: '周',
          numPer: 500,
          children: [{
            id: '1 - 2 - 1',
            label: '销售一部',
            mainPer: '吴'
          }, {
            id: '1 - 2 - 2',
            label: '销售二部',
            mainPer: '郑',
          }
          ]
        }, {
          id: '1 - 3',
          label: '财务部',
          mainPer: '王小杰',
        },
        {
          id: '1 - 4',
          label: '财务部',
          mainPer: '王小杰',
        },
        {
          id: '1 - 5',
          label: '财务部',
          mainPer: '王小杰',
        },
        {
          id: '1 - 6',
          label: '财务部',
          mainPer: '王小杰',
        },
        {
          id: '1 - 7',
          label: '财务部',
          mainPer: '王小杰',
        },
        {
          id: '1 - 8',
          label: '财务部',
          mainPer: '王小杰',
        },
        {
          id: '1 - 9',
          label: '财务部',
          mainPer: '王小杰',
        },
        ]
      }],
    }
  },
  mounted () {
  },
  methods: {
    changeDate (date, dateString) {
      console.log(date, dateString)
    },
    onLoadData (treeNode) {
      return new Promise(resolve => {
        const { id } = treeNode.dataRef
        setTimeout(() => {
          this.treeData = this.treeData.concat([
            this.genTreeNode(id, false),
            this.genTreeNode(id, true),
          ])
          resolve()
        }, 300)
      })
    },
    genTreeNode (parentId, isLeaf = false) {
      const random = Math.random()
        .toString(36)
        .substring(2, 6)
      return {
        id: random,
        pId: parentId,
        value: random,
        title: isLeaf ? 'Tree Node' : 'Expand to load',
        isLeaf,
      }
    },
    handleChange (value) {
      // console.log(`Selected: ${value}`)
    },
    toStruAdjust () {
      this.$router.push('/xcore/home/Structure/StruAdjust')
    },
    renderContent (h, node) {
      // console.log(h, node, '---')
      const cls = ["diy-wrapper view-item-box"]
      let log = require('@/image/zuzhijiagou.png')
      if (node.isCurrent) {
        cls.push("current-select")
      }
      return (
        <div class={cls} >
          <div>
            <img src={log} style="width: 22px; height: 22px;margin-right:5px" />
            <span style="font-size:16px; font-weight:bold">{node.data.label}</span>
          </div>
          <p>{node.data.mainPer}</p>
          <p>CEO</p>
          <div><span style="margin-right: 10px">在职人数</span><span>{node.data?.numPer}</span></div>
        </div >
      )
    },
    // 节点展开的事件
    handleNodeExpand (data) {
      console.log(data, '----')
    },
  },
}
</script>

<style lang="scss" scoped>
.toSearch {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}
</style>
<style lang="scss">
.view-item-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: #fff;
  max-height: 100%;
  padding: 10px;
  border-radius: 2px;
  box-shadow: 0 1px 10px rgba(31, 35, 41, 0.08);
  cursor: pointer;
  position: relative;
  font-size: 14px;
  min-width: 150px;
}
.vertical .org-chart-node-label .org-chart-node-label-inner {
  padding: 0;
}
// .org-chart-container {

// }
</style>